<template>
    <div v-if="ShowPage">
         <van-nav-bar
            title="绿电溯源证书"
            left-text=""
            right-text="分享"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <div id="elec-content" class="elec-content">
            <div class="content-title">{{this.elecListInfo.title}}</div>
            <div class="content-echart">
                <div class="img1" v-show="img1">                 
                    <!-- <van-notice-bar scrollable :text="this.stationName[0]" @click="wrapPop"/> -->
                    <img src="../assets/sunban.png" alt="">
                    </div>
                <div class="img2" v-show='img2'>                 
                    <!-- <van-notice-bar scrollable :text="this.stationName[1]" @click="wrapPop1" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img3" v-show='img3'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[2]" @click="wrapPop2" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img4" v-show='img4'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[3]" @click="wrapPop3" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img5" v-show='img5'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[4]" @click="wrapPop4" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img6" v-show='img6'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[5]" @click="wrapPop5" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img7" v-show='img7'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[6]" @click="wrapPop6" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img8" v-show='img8'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[7]" @click="wrapPop7" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img9" v-show='img9'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[8]" @click="wrapPop8" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
                <div class="img10" v-show='img10'>
                    <!-- <van-notice-bar scrollable :text="this.stationName[9]" @click="wrapPop9" /> -->
                    <img src="../assets/sunban.png" alt="">
                </div>
            </div>
            <div class="content-box">
                <ul>
                    <li><span>发电站：</span><span>{{this.elecList.powerStationName}}</span></li>
                    <li><span>充电桩：</span><span>{{this.elecList.stationName}}</span></li>
                    <li><span>订单时间：</span><span style="font-size:12px;margin-top:0px">{{this.elecList.orderCreateTime | formatDate}} 至 {{this.elecList.orderEndTime | formatDate}}</span></li>
                    <li><span>充电时长：</span><span style="margin-top:3px">{{(this.elecList.orderEndTime-this.elecList.orderCreateTime) | formatDuring}}</span></li>
                    <li>
                        <span>订单电量：</span><span class="span-spe">{{this.elecList.energy}}kwh</span>
                        <span>绿电量：</span><span class="span-spe" style="color:#18C048">{{this.elecListInfo.energy}}kwh</span>
                        <span>占比：</span><span class="span-spe" style="color:#EB8E13">{{this.elecListInfo.energyProportion}}</span>
                    </li>
                    <van-progress :percentage="this.baifen" stroke-width="8" color="#18C048" class="van-progress"/>
                </ul>
            </div>
            <div class="content-footer"></div>
        </div>
    </div>
   
</template>
<script> 
import jsBridge from '../utils/jsBridge'
import isWeixin from '../utils/isWeixin'
import base64Strs from '../components/base64New'
import { parse } from 'querystring'
import dayjs from 'dayjs'
import html2canvas from 'html2canvas'
export default {
    data(){
        return {
            elecList:[],
            powerStationName:'',
            stationName:[],
            // ddd:'',
            // message:JSON.stringify(this.stationName[0]),
            elecListInfo:[],         
            ShowPage:true,
            baifen:'',
            img1:false,
            img2:false,
            img3:false,
            img4:false,
            img5:false,
            img6:false,
            img7:false,
            img8:false,
            img9:false,
            img10:false,
        }
    },
    created(){
        // let aaa = ["全球新冠肺炎确诊病例超45万！","死亡人数破2万！"]
        // this.stationName = aaa
            // 数据
        jsBridge.SetTitleBar({
            isShow: false
        })
        console.log("222222222",parse(location.search))
        const code = parse(location.search.replace('?', '')).code
        jsBridge.getToken((res) => {
            // alert(1)
        // console.log('getToken: ---> ' + res)
        jsBridge.NativeNetworkRequest({
            ua: 'E卡',
            url: 'internal.validationTokens',
            encryption: '1',
            method: 'post',
            params: `{"token":"${res}","greenElectricCode":"${code}"}`
        }, (res) => {
            // this.elecList = res.data.data
            // this.elecListInfo = res.data.data.distributedInfoDto
            console.log("333333333",res);
            const result = JSON.parse(res || "{}")
            
            if (result && result.data && result.data.code === 1) {
                this.elecList = result.data.data
                this.elecListInfo = result.data.data.distributedInfoDto
                // this.powerStationName = result.data.data.powerStationName
                // this.stationName = this.powerStationName.split(",")
                if(this.elecList.category == 1){
                    this.$router.push('/Home')
                }
                // if(this.elecList.category == 2){
                //     this.$router.push('/')
                // }
                let bai = this.elecList.distributedInfoDto.energyProportion 
                bai = bai.substr(0,bai.length-1);
                console.log("wwwwww",bai)
                this.baifen = bai
                this.ShowPage = true
                let imgcon = this.elecList.distributedInfoDto.count
                // console.log(imgcon)
                if(imgcon == 1) this.img1 = true
                if(imgcon == 2) this.img1 = true,this.img2 = true
                if(imgcon == 3) this.img1 = true,this.img2 = true,this.img3 = true
                if(imgcon == 4) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true
                if(imgcon == 5) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true
                if(imgcon == 6) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true
                if(imgcon == 7) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true
                if(imgcon == 8) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true,this.img8 = true
                if(imgcon == 9) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true,this.img8 = true,this.img9 = true
                if(imgcon == 10) this.img1 = true,this.img2 = true,this.img3 = true,this.img4 = true,this.img5 = true,this.img6 = true,this.img7 = true,this.img8 = true,this.img9 = true,this.img10 = true
                
            // this.setInfo(result.data.data || {}, code)
            // this.$data.showShareBtn = true
            }
            // console.log('NativeNetworkRequest: ---> ', JSON.stringify(res))
        })
        })    
        
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      },
      formatDuring: function (mss) {
        var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = (mss % (1000 * 60)) / 1000;
        hours = hours < 10 ? ('0' + hours) : hours;
        minutes = minutes < 10 ? ('0' + minutes) : minutes;
        seconds = seconds < 10 ? ('0' + seconds) : seconds;
        return hours + ":" + minutes + ":" + seconds;

      },
    },
    methods: {
        onClickLeft() {//返回
            jsBridge.turnback()
        },
        onClickRight() {//分享
            html2canvas(document.querySelector('#elec-content')).then(canvas => {
                let imgUrl = canvas.toDataURL('image/png');
                jsBridge.ShareEvent({
                    title: 'test',
                    description:'1111',
                    url: 'test',
                    imageUrl: imgUrl,
                    // imageData: canvas.toDataURL('image/png', 1).replace('data:image/png;base64,', ''),
                    // imageData: base64Strs,
                    type: 2
                })
                // that.dataURL = imgUrl;
                // that.firstFlag = false;
            }).catch(error => {
            })
            
        },
        // wrapPop(){
        //    this.$toast({
        //     message: this.stationName[0],
        //    });
        // },
        // wrapPop1(){
        //    this.$toast({
        //     message: this.stationName[1],
        //    });
        // },
        // wrapPop2(){
        //    this.$toast({
        //     message: this.stationName[2],
        //    });
        // },
        // wrapPop3(){
        //    this.$toast({
        //     message: this.stationName[3],
        //    });
        // },
        // wrapPop4(){
        //    this.$toast({
        //     message: this.stationName[4],
        //    });
        // },
        // wrapPop5(){
        //    this.$toast({
        //     message: this.stationName[5],
        //    });
        // },
        // wrapPop6(){
        //    this.$toast({
        //     message: this.stationName[6],
        //    });
        // },
        // wrapPop7(){
        //    this.$toast({
        //     message: this.stationName[7],
        //    });
        // },
        // wrapPop8(){
        //    this.$toast({
        //     message: this.stationName[8],
        //    });
        // },
        // wrapPop9(){
        //    this.$toast({
        //     message: this.stationName[9],
        //    });
        // },
        // runMarquee() {
        //     // 获取文字 计算后宽度
        //     var width = document.getElementById('marquee').getBoundingClientRect().width,
        //         marquee = document.getElementById('marquee-box'),
        //         disx = 0; // 位移距离
        //     //设置位移
        //     setInterval(() => {
        //         disx--; // disx-=1; 滚动步长
        //         if (-disx >= width) {
        //             disx = 10; // 如果位移超过文字宽度，则回到起点  marquee-list的margin值
        //         }
        //         // marquee.style.transform = 'translateX(' + disx + 'px)'
        //         marquee.style.left = disx + 'px'
        //     }, 30) //滚动速度
        // },
  },
}
 

</script>
<style scoped>
.elec-content{
    background: url('../assets/img_brd.png') no-repeat;
    /* background-color: #DBE8E1; */
    background-size: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.content-title{
    width: 100%;
    height:50px;
    line-height: 50px;
    color: #fff;
    font-size: 26px;
    font-family: Noto Sans SC;
    text-align: center;
}
.content-echart{
    width: 100%;
    height:250px;
    margin-top: 50px;
    position: relative;
}
.img1{
    width: 28px;
    height:28px;
    position: absolute;
    left:150px;
    top:78px;
}
.img1 img{
    width: 100%;
}
.img2{
    width: 28px;
    height:28px;
    position: absolute;
    left:103px;
    top:110px;
}
.img2 img{
    width: 100%;
}
.img3{
    width: 28px;
    height:28px;
    position: absolute;
    left:129px;
    top:122px;
}
.img3 img{
    width: 100%;
}
.img4{
    width: 28px;
    height:28px;
    position: absolute;
    left:114px;
    top:150px;
}
.img4 img{
    width: 100%;
}
.img5{
    width: 28px;
    height:28px;
    position: absolute;
    left:203px;
    top:102px;
}
.img5 img{
    width: 100%;
}
.img6{
    width: 28px;
    height:28px;
    position: absolute;
    left:204px;
    top:62px;
}
.img6 img{
    width: 100%;
}
.img7{
    width: 28px;
    height:28px;
    position: absolute;
    left:78px;
    top:130px;
}
.img7 img{
    width: 100%;
}
.img8{
    width: 28px;
    height:28px;
    position: absolute;
    left:66px;
    top:160px;
}
.img8 img{
    width: 100%;
}
.img9{
    width: 28px;
    height:28px;
    position: absolute;
    left:113px;
    top:210px;
}
.img9 img{
    width: 100%;
}
.img10{
    width: 28px;
    height:28px;
    position: absolute;
    left:250px;
    top:146px;
}
.img10 img{
    width: 100%;
}
.content-box{
    width: 325px;
    margin: 3px auto;
    height:146px;
    /* padding-left:10px; */
    box-sizing:border-box;
    text-align:left;
}
.content-box ul{
    width: 100%;
}
.content-box ul li{
    padding:0px 2px;
    /* height:32px; */
    display: flex;
    /* align-items: center; */
}
.content-box ul li span:nth-child(1){
    white-space:nowrap;
}
/* .content-box ul li:nth-child(1) span:nth-child(2){
    overflow: hidden;
} */
.content-box ul li span{
    /* height:16px;
    line-height: 16px; */
    font-size: 13px;
    display:inline-block;
    font-family: Noto Sans SC;
}
.content-box ul li:nth-child(5) .span-spe{
   padding-right: 8px;
   margin-top: 3px;
}
.van-progress{
    margin-top:5px;
    width: 96%;
    margin-left: 2%;
}
.content-footer{
    width: 100%;
    min-height:148px;
}
.van-nav-bar .van-icon{
    color: #323233;
}
.van-nav-bar__text{
    color: #323233;
}
.van-notice-bar{
    position: absolute;
    top: -36px;
    left: -20px;
    background-color:transparent;
    width: 50px;
    color: #000;
}
/* .marquee-wrap{position: absolute;;display:flex;overflow:hidden;width:100%;height:100%;top:-26px;}
    .marquee-box{position:absolute;top:50%;display:flex;white-space:nowrap;transform:translateY(-50%)}
    .marquee-list{margin-right:10px} 
    .marquee-list span{padding:0 .04rem;color:#ffe17b;font-weight:700} */
</style>